<!-- src/views/Home.vue -->
<template>
  <div class="home-container">
    <div class="space" style="height: 20px;"></div> <!-- 空白元素 -->
    <div class="logo-container">
      <img src="@/resources/img/logo.png" alt="Logo">
    </div>
    <div class="space" style="height: 70px;"></div> <!-- 空白元素 -->
    <div class="title">
      更方便的数据计算平台
    </div>
    <div class="space" style="height: 10px;"></div> <!-- 空白元素 -->
    <div class="description">
      易用，快捷，私密，本地化的数据处理工具合集
    </div>
    <div class="space" style="height: 10px;"></div> <!-- 空白元素 -->
    <div class="button-container">
      <el-button type="success" size="large" @click="goToToolsPage">快速上手 即刻体验   ➡</el-button>
    </div>
    <div class="space" style="height: 80px;"></div> <!-- 空白元素 -->
    <div class="feature-box">
      <div class="feature">
        <div class="feature-icon">
          <i class="el-icon-check"></i>
        </div>
        <div class="feature-text">
          <h3>易用</h3>
          <p class="feature-description">支持多种文件格式，简单直观的界面和工作流程，轻松快速地完成数据处理任务。</p>
        </div>
      </div>
      <div class="feature">
        <div class="feature-icon">
          <i class="el-icon-lock"></i>
        </div>
        <div class="feature-text">
          <h3>快捷</h3>
          <p class="feature-description">高效的算法和优化的处理流程，确保数据的处理速度和响应时间达到最优。</p>
        </div>
      </div>
      <div class="feature">
        <div class="feature-icon">
          <i class="el-icon-lock"></i>
        </div>
        <div class="feature-text">
          <h3>私密</h3>
          <p class="feature-description">重视用户数据的安全和隐私保护，确保用户的数据在本地处理，不被泄露或篡改。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    goToToolsPage() {
      this.$router.push('/tools');
    }
  }
};
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.logo-container {
  margin-top: 50px; /* 调整 Logo 的位置 */
}

.title {
  font-size: 32px;
  margin: 20px 0;
}

.description {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.button-container {
  margin-bottom: 30px;
}

.feature-box {
  display: flex;
  justify-content: space-between;
  width: 70%;
}

.feature {
  display: flex;
  align-items: center;
  width: 100%; /* 占满父容器宽度 */
  margin-bottom: 20px;
}

.feature-icon {
  margin-right: 20px;
  font-size: 24px;
}

.feature-text h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.feature-description {
  font-size: 16px; /* 调整字体大小 */
  color: #888; /* 设置灰色 */
  line-height: 2.5; /* 增加行间距 */
}

.space {
  height: 100px; /* 设置空白高度 */
}
</style>
